<template>
  <div class="page-wrap">
    <div class="container">{{num}}</div>
    <div class="result">
      <dv-border-box-12>
        <div>
          <label for>Passed:</label>
          <span class="score">{{result}}/200</span>
        </div>
        <div>
          <label for>Errors:</label>
          <span class="score">{{errors}}/25</span>
        </div>
      </dv-border-box-12>
    </div>
  </div>
</template>

<script>
export default {
  name: "monitor2",
  components: {},
  data() {
    return {
      num: "",
      numCache: "",
      count: 0,
      intervalId: null,
      timeoutId: null,
      result: 0,
      errors: 0,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.listen();
      this.intervalId = setInterval(() => {
        this.run();
      }, 1150);
    },
    run() {
      this.num = parseInt(Math.random() * 8) + 1;
      this.numCache = this.num;
      this.count++;
      this.timeoutId = setTimeout(() => {
        this.num = "";
      }, 250);
      if (this.count > 225) {
        clearInterval(this.intervalId);
        clearTimeout(this.timeoutId);
        this.unListen();
        this.num = "done";
      }
    },
    listen() {
      document.addEventListener("click", this.record);
      document.addEventListener("keyup", this.record);
    },
    unListen() {
      document.removeEventListener("click", this.record);
      document.removeEventListener("keyup", this.record);
    },
    record(e) {
      if (e.code === "Space" || (e.type === "click" && e.detail === 1)) {
        if (this.numCache === 3) {
          this.errors++;
        } else {
          this.result++;
        }
      }
    },
  },
  watch: {},
};
</script>

<style lang="scss" scoped>
.page-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  .container {
    font-size: 150px;
  }
  .result {
    position: absolute;
    left: 77%;
    top: 8%;
    font-size: 30px;
    label {
      width: 140px;
      text-align: right;
      display: inline-block;
      padding-right: 10px;
    }
    .score {
      display: inline-block;
      width: 140px;
      // padding-right: 30px;
    }
  }
}
</style>
